<ng-container *ngIf="stepMessages  && stepMessages.length>1">
  <farris-progress-step [steps]="stepMessages" [currentId]="currentId" style="margin: 14px auto 0;">
  </farris-progress-step>
</ng-container>


<!-- 选实体 -->
<div [ngClass]="currentId==='selectTable' ? 'd-flex f-utils-fill-flex-column px-3' : 'd-none'">
  <div class="f-utils-fill entityDiv" [class.border-0]="stepMessages && stepMessages.length===1">
    <div class="d-flex f-utils-fill-flex-colum  h-100">
      <farris-treetable #schemaTree [data]="schemaSource" [idField]="'id'" [striped]="true"
        [columns]="schemaTreeColumns" [singleSelect]="true" [showFilterBar]="false" [width]="'100%'" [height]="'100%'"
        [fit]="true" [showHeader]="false" [showBorder]="false" [fixedHeader]="true" [showIcon]="true"
        [expandIcon]="'f-icon f-icon-file-folder-close text-warning mr-2'"
        [collapseIcon]="'f-icon f-icon-file-folder-close text-warning mr-2'"
        [leafIcon]="'f-icon f-icon-file-txt text-primary mr-2'" (nodeSelected)="selectedEntityChanged($event)">
      </farris-treetable>
    </div>
  </div>
</div>

<!-- 选组件类型 -->
<div [ngClass]="currentId==='selectComponentType' ? 'd-flex f-utils-fill-flex-column px-3' : 'd-none'">
  <div class="f-utils-fill" [class.border-0]="stepMessages && stepMessages.length===1">
    <div class=" f-section py-0">
      <div class="f-section-header">
        <div class="f-title">
          <h4 class="f-title-text">组件信息</h4>
        </div>
      </div>
      <div class="f-section-content">
        <div class="f-form-layout farris-form farris-form-controls-inline">
          <div class="col-12 farris-group-wrap">
            <div class="form-group farris-form-group">
              <label class="col-form-label" style="justify-content: start !important; width: 80px !important;">
                <span class="farris-label-info text-danger">*</span>
                <span class="farris-label-text">组件类型</span></label>
              <div class="farris-input-wrap">
                <farris-combo-list [(ngModel)]="componentType" [idField]="'value'" [textField]="'text'"
                  [data]="componentTypeList" [editable]="false" [enableClear]="false" [enableCancelSelected]="false">
                </farris-combo-list>
              </div>
            </div>
          </div>
          <div class="col-12 farris-group-wrap">
            <div class="form-group farris-form-group">
              <label class="col-form-label" style="justify-content: start !important; width: 80px !important;">
                <span class="farris-label-info text-danger">*</span>
                <span class="farris-label-text">组件标题</span></label>
              <div class="farris-input-wrap">
                <input class="form-control" type="input" [(ngModel)]="componentName">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 选字段-->
<div [ngClass]="currentId==='selectShowFields' ? 'd-flex f-utils-fill-flex-column fieldsDiv' : 'd-none'">
  <div class="f-utils-fill">
    <farris-treetable #fieldsTree [cascadeCheck]="false" [data]="fieldsSource" [columns]="filedsTreeColumns"
      [showCheckAll]="false" [idField]="'id'" [fixedHeader]="true" [showFilterBar]="false" [width]="'100%'"
      [height]="'100%'" [fit]="true" [showIcon]="false" [showBorder]="false">
      <ng-template farrisTemplate="header" let-columns>
        <tr>
          <th *ngFor="let col of columns">
            <ng-container *ngIf="col.field!=='show'">{{col.title}}</ng-container>
            <ng-container *ngIf="col.field==='show'">{{col.title}}
              <div *ngIf="hasSelectableFields" class="custom-control custom-checkbox d-inline ml-2">
                <input type="checkbox" class="custom-control-input" id="CheckAll" [(ngModel)]="selectedAllFields"
                  (ngModelChange)="clickSelectAllFieldsCheckbox()" />
                <label class="custom-control-label" [for]="'CheckAll'"></label>
              </div>
            </ng-container>
          </th>
        </tr>
      </ng-template>

      <ng-template farrisTemplate="body" let-rowNode let-rowIndex="index" let-rowData="rowData" let-columns="columns">
        <tr #row="row" [selectRow]="rowNode" [rowIndex]="rowIndex" [dblclick]="true"
          [selectRowDisabled]="!rowNode.node.selectable">
          <td *ngFor="let col of columns; let i = index" [style.color]="row.selectRowDisabled? '#a6a6a6': '#333'">
            <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
            <ng-container *ngIf="col.field ==='name'">
              <span [title]="rowData.name">{{rowData.name}}</span>
            </ng-container>
            <ng-container *ngIf="col.field==='bindingField' && rowData.$type==='SimpleField'">
              <span [title]="rowData.bindingField">{{rowData.bindingField}}</span>
            </ng-container>
            <ng-container *ngIf="col.field==='type' && rowData.$type==='SimpleField'">
              <span [title]="rowData.type.displayName">{{rowData.type.displayName || rowData.type.name}}</span>
            </ng-container>
            <div *ngIf="col.field==='show' && rowNode.node.selectable" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" [id]="rowData.id"
                [(ngModel)]="selected[rowData.bindingField]"
                (ngModelChange)="clickCheckbox(selected[rowData.bindingField],rowData)" />
              <label class="custom-control-label" [for]="rowData.id"> </label>
            </div>
          </td>
        </tr>
      </ng-template>
    </farris-treetable>
  </div>
</div>

<ng-template #btns>
  <button class="btn btn-secondary btn-lg" (click)="clickCancel()">取消</button>
  <button class="btn btn-secondary btn-lg" *ngIf="activeIndex!==0" (click)="clickPreStep()">上一步</button>
  <button class="btn btn-primary btn-lg" *ngIf="activeIndex!==stepMessages.length-1"
    (click)="clickNextStep()">下一步</button>
  <button class="btn btn-primary btn-lg" *ngIf="activeIndex===stepMessages.length-1" (click)="clickSave()">确定</button>
</ng-template>